<template>
  <el-container class="user-center usercot days">
    <el-header class="user-header">
      <home-header></home-header>
    </el-header>
    <el-container class="main-wrapper">
      <el-aside width="178px">
        <menu-box></menu-box>
      </el-aside>
      <el-main>
        <div class="wrapper">
          <div class="box page-part transaction">
            <div class="box-contain clearfix">
              <!-- <div class="text-center">
                <i style="font-size: 1.5rem;" class="maincolor-font iconfont icon-jiaoyi"></i>
              </div> -->
              <el-card class="box-card" style="margin-top:0px;">
               
                <div class="text item">
                  <el-tabs>
                    <el-tab-pane label="按天配资" name="first">
                    </el-tab-pane>
                  </el-tabs>
                </div>

                <table style="width: 100%;border-spacing:160px 180px;" class="demo-form-inline auth-box daystable">
                  <tr>
                    <td class="tr-cols1">预警线</td>
                    <td class="tr-cols2">{{Number(Number(form.margin) + (form.margin * fundsSetting.daysWarning)).toFixed(0)}} 元
                      <span class="td-font">（预警线 = 配资资金 + 保证金 X {{fundsSetting.daysWarning}}）</span>
                    </td>
                    <td class="tr-cols3 bgc" >保证金</td>
                    <td class="bgc">
                      <el-input type='number' @change="getIntNumber()" class="td-input" v-model="form.margin" placeholder="请输入金额"></el-input>
                      <span class="td-span">（保证金介于 {{fundsSetting.marginMin}} - {{fundsSetting.marginMax}} 元之间）</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="tr-cols1">平仓线</td>
                    <td class="tr-cols2">{{Number(Number(form.margin) + (form.margin * fundsSetting.daysUnwind)).toFixed(0)}} 元
                      <span class="td-font">（平仓线 = 配资资金 + 保证金 X {{fundsSetting.daysUnwind}}）</span>
                    </td>
                    <td class="tr-cols3 bgc" >配资资金</td>
                    <td class="bgc">
                      <!-- <el-input type='number' class="td-input" placeholder="请输入金额"></el-input> -->
                      <el-select clearable filterable v-model="selCycleType" placeholder="配置杠杆"  @change="currentSel" style="width:120px;">
                        <el-option v-for="item in fundsTypeList" :key="item.id" :value="item">{{item.lever}}倍</el-option>
                      </el-select>
                      <span class="td-span">（配资资金为{{fundsAmount}}元）</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="tr-cols1">管理费</td>
                    <td class="tr-cols2">{{selManageRate}}% 
                      <span class="td-font">（{{fundsAmount}} X 天利率{{selManageRate}} % X {{selDaysUseVal}} = {{manageFee}} 元 ）</span>
                    </td>
                    <td class="tr-cols3 bgc" >操盘期限</td>
                    <td class="bgc">
                      <el-select clearable filterable v-model="selDaysUsePeriod" placeholder="操盘期限"  @change="currentSelDays" style="width:120px;">
                        <el-option v-for="item in (fundsSetting.daysUsePeriod || '').split('|')" :key="item" :value="item">{{item}}天</el-option>
                      </el-select>
                      <span class="td-span">（操盘期限介于 {{selMinDay}} - {{selMaxDay}}  天之间）</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="tr-cols1">自动续期</td>
                    <td class="tr-cols2">
                      <span class="td-font">默认开启到期自动续期，配资管理费先付后用</span>
                    </td>
                    <td class="tr-cols3 bgc" >总操盘资金</td>
                    <td class="bgc">
                      <span class="td-span">{{totalTradingAmount}} 元 = {{Number(form.margin).toFixed(0)}}元（保证金）+ {{fundsAmount}} 元（配资资金）</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="tr-cols1">操盘须知</td>
                    <td class="tr-cols2">
                      <span class="td-font">单只股票最大持仓比例为 {{selSingleHoldingRatio*100}}%。</span>
                    </td>
                    <td class="tr-cols3 bgc">需准备资金</td>
                    <td class="bgc">
                      <span class="td-span">{{Number(Number(form.margin) + (fundsAmount * selManageRate * selDaysUseVal / 100)).toFixed(1)}}  元 = {{Number(form.margin).toFixed(0)}} 元（保证金）+ {{Number(fundsAmount * selManageRate * selDaysUseVal / 100).toFixed(1)}} 元 (一次性收取管理费)</span>
                    </td>
                  </tr>

                </table>

                <div class="auth-box" style="padding-bottom:40px;">
                  <div slot="footer" class="dialog-footer">
                    <el-button type="primary" :loading="isloading" @click="Onsubmit()">立即申请</el-button>
                  </div>
                </div>

                <div class="notice">
                    <div class="notice-hd">
                        注意事项：
                    </div>
                    <div class="notice-bd">
                        <ul>
                            <li>1.保证金：您用于投资股票的资金,起点相当低。</li>
                            <li>2.操盘期限：按天计算，不包含各类法定节假日。</li>
                            <li>3.按天支付管理费（不包含交易印花税、过户费和佣金），无其他任何费用。</li>
                            <li>4.如操盘10天，一次性收取10天管理费</li>
                            <li>5.交易日当天14:50之前的申请于当日生效（当天开始收取账户管理费），交易日当天14：50后的申请于下个交易日生效。</li>
                            <li>6.股市有风险，投资需谨慎。</li>
                        </ul>
                    </div>
                </div>

              </el-card>
              
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
  import HomeHeader from '../../../components/HeaderOrder'
  import HomeFooter from '../../../components/Footer'
  import MenuBox from '@/pages/user/components/menu'
  import * as api from '../../../axios/api'

  export default {
    components: {
      HomeHeader,
      HomeFooter,
      MenuBox
    },
    props: {},
    data () {
      return {
        isloading: false,
        form: {
          margin: ''
        },
        selLever: 0,
        selManageRate: 0,
        selCycleType: '',
        selDaysUsePeriod: '',
        selDaysUseVal: '',
        selMinDay: '',
        selMaxDay: '',
        selSingleHoldingRatio: '',
        fundsSetting: {},
        fundsTypeList: [{}]
      }
    },
    watch: {},
    computed: {
      fundsAmount () { //配资金额= 保证金*杠杆倍数
        if (this.form.margin) {
          return Number(this.form.margin * this.selLever).toFixed(0)
        } else {
          return 0
        }
      },
      totalTradingAmount () {//总操盘金额
        if (this.form.margin) {
          return Number(Number(this.form.margin) + (this.form.margin * this.selLever)).toFixed(0)
        } else {
          return 0
        }
      },
      manageFee () {//管理费
        if (this.selDaysUseVal) {
          return (this.fundsAmount * this.selManageRate * this.selDaysUseVal / 100).toFixed(1)
        } else {
          return 0
        }
      }
    },
    created () {
      this.getUserInfo()
      this.getFundsSetting()
      this.getFundsTypeList()
    },
    mounted () {
      this.$store.state.userMenu = '2-22'
    },
    methods: {
      async getUserInfo () {
        // 获取用户信息
        let data = await api.getUserInfo()
        if (data.status === 0) {
          // 判断是否登录
          this.$store.state.userInfo = data.data
        } else {
        }
      },
      async getFundsSetting () {
        // 分仓配资设置信息查询
        let data = await api.getFundsSetting()
        if (data.status === 0) {
          this.fundsSetting = data.data
          this.form.margin = this.fundsSetting.marginMin
          this.selDaysUsePeriod = this.fundsSetting.daysUsePeriod.split('|')[0] + '天'
          this.selDaysUseVal = this.fundsSetting.daysUsePeriod.split('|')[0]
          this.selMinDay = this.fundsSetting.daysUsePeriod.split('|')[0]
          this.selMaxDay = this.fundsSetting.daysUsePeriod.split('|')[this.fundsSetting.daysUsePeriod.split('|').length - 1]
        } else {
        }
      },
      async getFundsTypeList () {
        // 查询配资类型杠杆
        let data = await api.getFundsTypeList({cycleType:1})
        if (data.status === 0) {
          this.fundsTypeList = data.data.list
          this.selLever = this.fundsTypeList[0].lever
          this.selManageRate = this.fundsTypeList[0].manageRate
          this.selCycleType = this.fundsTypeList[0].lever + '倍'
          this.selSingleHoldingRatio = this.fundsTypeList[0].singleHoldingRatio
        } else {
        }
      },
      getIntNumber () {
        if (this.form.margin >= this.fundsSetting.marginMax) {
          this.form.margin = this.fundsSetting.marginMax
        }
        this.form.margin = Math.floor(this.form.margin)
      },
      async Onsubmit () {
        // 融资转指数
        let opt = {
          userId: this.$store.state.userInfo.id,
          userName: this.$store.state.userInfo.realName,
          userPhone: this.$store.state.userInfo.phone,
          fundsType: 1, // 配资类型：1按天、2按周、3按月
          margin: this.form.margin, //保证金
          fundsAmount: this.fundsAmount, //配资金额
          lever: this.selLever, //杠杆
          totalTradingAmount: this.totalTradingAmount, //总操盘金额
          tradersCycle: this.selDaysUseVal, //操盘期限
          manageFee: this.manageFee //管理费
        }
        let data = await api.addFundsApply(opt)
        if (data.status === 0) {
          this.$message.success(data.msg)
        } else {
          this.$message.error(data.msg)
        }
      },
      currentSel(selVal) {
        this.selLever = selVal.lever
        this.selManageRate = selVal.manageRate
        this.selCycleType = selVal.lever + '倍'
        this.selSingleHoldingRatio = selVal.singleHoldingRatio
      },
      currentSelDays(selVal) {
        this.selDaysUsePeriod = selVal + '天'
        this.selDaysUseVal = selVal
      }
      
    }
  }
</script>
<style lang="less" scoped>
  .code {
    font-size: 12px;
    color: #999;
  }

  .auth-box {
    margin-top: 20px;

    .el-row {
      margin-bottom: 10px;
    }
  }

  .authed-box {
    .el-row {
      padding-top: 40px;
      width: 400px;
      margin: 0 auto;
    }
  }

  .wrapper {
    padding: 20px;

    .demo-form-inline {
      width: 400px;
      margin: 20px auto;
    }

    .auth-box {
      .dialog-footer {
        width: 400px;
        margin: 0 auto;

        .el-button {
          margin-left: 100px;
          width: 300px;
        }
      }
    }

    .prompt-box {
      padding-bottom: 20px;
      color: #f44336;

      p {
        line-height: 24px;
      }
    }

    .rule-box {
      margin-top: 30px;
      line-height: 26px;
      margin-left: 70px;
    }
  }

  .box-card {
    .red {
      font-size: 12px;
      margin-left: 10px;
    }
  }

  .td-font {
    font-size: 12px;
    margin-left: 0px;
    color: #606266;
  }

  .td-span {
    font-size: 12px;
    margin-left: 0px;
    color: #b13b51;
  }

  .tr-cols1 {
    width: 60px;
  }
  .tr-cols2 {
    width: 280px;
  }
  .tr-cols3 {
    width: 80px;
    padding-left: 15px;
  }
  .td-input {
    width: 120px;
  }
  .daystable{
    border-spacing:0px 0px;
  }
  table td{ height:70px; border:#CCCCCC 0px solid;}


  .notice {
    padding: 10px 30px 40px;
    color: #bb9767;
  }
  .notice .notice-hd {
    line-height: 50px;
    font-size: 18px;
    border-bottom: 1px dashed #D9D9D9;
    padding: 0 16px;
  }

  .notice .notice-bd li {
    font-size: 12px;
    line-height: 30px;
}
  
</style>
